<template>
  <div class="taskmanage">
    <van-tabbar v-model="active" @change="onChange">
      <van-tabbar-item icon="checked">已完成</van-tabbar-item>
      <van-tabbar-item icon="question">待领取</van-tabbar-item>
      <van-tabbar-item icon="more">待审核</van-tabbar-item>
      <van-tabbar-item icon="clear">已拒绝</van-tabbar-item>
      <van-tabbar-item icon="warning">申诉</van-tabbar-item>
      <van-tabbar-item icon="todo-list">历史记录</van-tabbar-item>
    </van-tabbar>
    <div class="activebox" v-if="isshow">
      <div class="activeone" v-for="item in task_extra" :key="item.id">
        <p class="titledate">
          <span class="first">
            <van-icon name="clock-o"/>
            <span style="margin-left:5px">{{ item.create_time }}</span>
          </span>
          <span class="typestyle"
                :class="{'red':item.platform_type == 1,'green':item.platform_type == 2,'blue':item.platform_type == 3,'black':item.platform_type == 4,'purple':item.platform_type == 5,'pink':item.platform_type == 6}">
            {{ item.platform_type == 1 ? '饿了么' : (item.platform_type == 2 ? '大麦' : (item.platform_type == 3 ? '大众点评' : (item.platform_type == 4 ? '美团' : (item.platform_type == 5 ? '小红书' : '其他')))) }}
          </span>
        </p>
        <p class="picimg">
          <img :src="item.picture_address" alt="">
        </p>
        <div class="bottombox">
          <p>
            <span>姓名：{{ item.brushhands_name }}</span>
          </p>
          <p
            v-if="item.task_status == 7">
            <span style="color:red;font-size:18px;font-weight:600;">请耐心等待商家审核！</span>
          </p>
          <p v-if="item.task_status == 4">
            <span v-if="item.task_type == 1">审核状态：已拒绝,前去退款</span>
            <span v-if="item.task_type != 1">审核状态：未按照要求去做</span>
          </p>
          <div
            v-if="item.task_status ==3">
            <span>付款金额：</span>
            <span class="btnmoney" :class="{'blue':item.tx_status == 2 || item.tx_status == 3}"
                  @click="handleMoney(item)">{{ item.tx_status == 2 || item.tx_status == 3 ? '已提本金(￥' + item.price + ')' : '本金(￥' + item.price + ')' }} </span>
            <span class="btnmoney" :class="{'blue':item.tx_status == 3}" @click="onMoney(item)"
                  style="margin-left:10px">{{ item.tx_status == 3 ? '已提佣金(￥' + item.user_commission + ')' : '佣金(￥' + item.user_commission + ')' }}</span>
          </div>
          <div v-else>
            <span v-if="item.task_type == 1">付款金额：￥{{ item.price }}</span>
            <span>佣金：￥{{ item.user_commission }}</span>
            <p style="font-size:20px;color:red;font-weight:600" v-if="item.task_status == 7">审核时间为24小时</p>
          </div>
          <div v-if="item.task_status == 1" style="display:flex;justify-content: flex-end;">
            <van-button type="info" size="small" style="margin-right:10px;" @click="goonrask(item)">继续任务</van-button>
            <van-button type="danger" size="small" @click="calcel(item.id)">取消任务</van-button>
          </div>
        </div>
      </div>
      <div style="position:fixed;bottom:50px;left:0;width:100%;background:white;" v-if="total>1">
        <van-pagination v-model="page" :page-count="total" mode="simple" @change="pageChange"/>
      </div>
      <van-dialog v-model="vaultDialog" title="提现到金库" show-cancel-button @confirm="onConfirm"
                  @cancel="vaultDialog = false">
        <div class="dialog">
          <img src="../assets/img/money.png" alt="">
          <p style="font-size:26px;line-height: 50px;">￥{{ yjmoney }}</p>
          <p style="color: #808080;">佣金提现到金库</p>
        </div>
      </van-dialog>
    </div>
    <div class="nodata" v-else>
      <img src="../assets/img/nodata.png" alt="">
      <span class="textcontent">没有正在执行的活动哦，马上去申请~</span>
      <span class="taskbtn" @click="$router.push('/home')">申请活动</span>
    </div>
    <van-dialog v-model="showme" title="提现" show-cancel-button @confirm="ConfirmWithDraw">
      <div style="display:flex;flex-direction:column;align-items: center;justify-content: center;height:100px;font-size:18px;">
        <span>是否把本金和佣金为<b style="color:red;font-size:20px;">{{withDraw.price+withDraw.user_commission}}</b>元提现到金库</span>
        <p>提现过后在金库内查看</p>
      </div>
    </van-dialog>
    <return></return>
    <Footer permsg='1'></Footer>
  </div>
</template>

<script>
import {
  tasklist,
  businesstreasury,
  task_extra_list,
  extra_task_withdrawal,
  evaluate_get,
  urging_evaluation,
  extra_task_cancel
} from '../api/api';
import aestool from '@/utils/aestool.js';
import Footer from '../components/footer.vue'
import Return from "./returnone";
import AgainReturn from "./AgainReturn";
export default {
  components: {AgainReturn, Return, Footer},
  data() {
    return {
      active: 0,
      page: 1,
      total: 0,
      taskinfo: [],
      Dialog: true,
      image: "",
      showme:false,
      withDraw:{},
      ids: "",
      isshow: false,
      importHeaders: {token: localStorage.getItem('xfq_token')},
      vaultDialog: false,
      yjmoney: '',
      showings: false,
      taskid: '',
      currentPage: 1,
      taskclass: '',
      task_extra:[]
    }
  },
  created() {
    if (this.$route.query.code) {
      sessionStorage.setItem('token', this.$route.query.t)
      if (this.$route.query.code == 1) {
        this.$toast('授权成功,请重新提现！')
      }
    }
    this.gettaskdata()
    this.task_extra_lists()
  },
  methods: {
    ConfirmWithDraw(){
      let params = {
          id:this.withDraw.id
      }
      extra_task_withdrawal(params).then((res)=>{
        if (res.Status == 200) {
          this.$toast(res.Message)
          this.task_extra_lists()
        } else {
          this.$toast(res.Message)
        }
      })
    },
    goonrask(item){
      this.$router.push({
        path: "/OtherRask",
        query: {
          id: item.id
        },
      })
    },
    calcel(id){
      let params = {
          id:id
      }
      extra_task_cancel(params).then((res)=>{
        if (res.Status == 200) {
          this.$toast(res.Message)
          this.task_extra_lists()
        } else {
          this.$toast(res.Message)
        }
      })
    },
    task_extra_lists(){
      let params = {
        page:1,
        page_size:10
      }
      task_extra_list(params).then((res)=>{
        console.log(res);
        this.task_extra = res.Data
        if(this.task_extra.length>0){
           this.isshow = true
        }else{
          this.isshow = false
        }
      })
    },
    Urgeevaluation(item) {
      let params = {
        task_id: item.task_id
      }
      urging_evaluation(params).then((res) => {
        if (res.Status == 200) {
          this.$toast(res.Message)
        } else {
          this.$toast(res.Message)
        }
      })
    },
    handlesuccess(val) {
      this.image = val.UrlImg
    },
    submits() {
      this.$axios.post('/api/v1/PI/task/pj_submits', {
        img: aestool.encrypt(this.image, 'CancelTaPjSubmit'),
        cancel_task: aestool.encrypt(this.ids, 'CancelTaPjSubmit')
      }).then((res) => {
        console.log(res);
        if (res.data.Status == 200) {
          this.$toast(res.data.Message)
          this.showings = false
          this.gettaskdata()
        } else {
          this.$toast(res.data.Message)
        }
      })
    },
    to_evaluate(create_time, id, task_class, baby_id, task_id) {
      if (task_class == 'pj') {
        this.showings = true
        let params = {
          baby_id: aestool.encrypt(baby_id, 'SyncorderzxPjGet'),
          task_id: aestool.encrypt(id, 'SyncorderzxPjGet'),
        }
        evaluate_get(params).then(res => {
          if (res.Status == 200) {
            let tempdata = JSON.parse(aestool.decrypt(res.Data, 'SyncorderzxPjGet'))
            console.log('评论数据', tempdata)
            this.data = tempdata
            this.data.imgs = JSON.parse(this.data.imgs)
            this.$router.push({
              path: '/evaluate',
              query: {baby_id: baby_id, id: id, order_Id: task_id}
            })
          } else {
            this.$toast(res.Message)
          }
        })
      } else {
        if (new Date().getTime() < new Date(create_time).getTime() + 24 * 60 * 60 * 1000 * 4) {
          this.$toast('请在四天后收货上传评价！')
        } else {
          this.ids = id
          console.log(this.ids);
          this.showings = true
        }
      }
    },
    onCopy(e) {
      this.$toast('复制成功！')
    },
    onError(e) {
      this.$toast('复制失败！')
    },
    //更新状态
    onUpdate(item) {
      let params = {
        order: aestool.encrypt(item.task_order, 'Syncorderzxcqwe0'),
        shop_name: aestool.encrypt(item.task_shopname, 'Syncorderzxcqwe0')
      }
      updateorderstatus(params).then(res => {
        console.log('更新状态', res)
        if (res.Status == 200) {
          this.$toast(res.Message)
          setTimeout(this.gettaskdata, 1500)
        } else {
          this.$toast(res.Message)
        }
      })
    },
    //佣金提现到金库
    onConfirm() {
      let toastload = this.$toast.loading({
        message: '加载中...',
        forbidClick: true
      });
      let params = {
        task_id: aestool.encrypt(this.taskid, 'Businesstreasury'),
        address: aestool.encrypt(sessionStorage.getItem('ip'), 'Businesstreasury'),
        task_type: aestool.encrypt(this.taskclass, 'Businesstreasury'),
      }
      businesstreasury(params).then(res => {
        toastload.clear()
        console.log('金库', res)
        if (res.Status == 200) {
          this.$toast(res.Message)
          setTimeout(this.gettaskdata(), 1500)
        } else {
          this.$toast(res.Message)
        }
      })
    },
    pageChange(val) {
      this.page = val
      this.gettaskdata()
    },
    gettaskdata() {
      let toastload = this.$toast.loading({
        message: '加载中...',
        forbidClick: true
      });
      let typeval
      if (this.active == 0) {
        typeval = 3
      } else if (this.active == 1) {
        typeval = 8
      } else if (this.active == 2) {
        typeval = 7
      } else if (this.active == 3) {
        typeval = 2
      } else if (this.active == 4) {
        typeval = 5
      } else if (this.active == 5) {
        typeval = 6
      }
      console.log('typeval', typeval)
      let params = {
        promptinfo: aestool.encrypt(typeval, 'tasklist87654321'),
        page: aestool.encrypt(this.page, 'tasklist87654321'),
        page_size: aestool.encrypt(10, 'tasklist87654321'),
      }
      tasklist(params).then(res => {
        toastload.clear()
        if (res.Status == 200) {
          this.total = Math.ceil(res.Count / 10)
          console.log(this.total);
          let temp = JSON.parse(aestool.decrypt(res.Data, 'tasklist87654321'))
          if (temp.length <= 0) {
            this.isshow = false
          } else {
            this.isshow = true
            let ipos
            temp.forEach(item => {
              ipos = item.create_time.indexOf("+")
              item.create_time = item.create_time.replace(/T/g, " ").substring(0, ipos)
            })
            this.taskinfo = temp
            console.log('活动', this.taskinfo)
          }
        } else {
          this.isshow = false
        }
      })
    },
    onappeal(item) {
      this.$router.push({
        name: 'sponsor',
        params: {
          taskId: item.id
        }
      })
    },
    onChange(index) {
      console.log('切换', index)
      this.gettaskdata()
    },
    //本金提现
    handleMoney(item) {
      if (item.tx_status == 2 || item.tx_status == 3) {
        this.$toast('本金已提现！')
      } else {
        this.withDraw = item
        this.showme = true
      }
    },
    //佣金提现
    onMoney(item) {
      if (item.tx_status == 1) {
        this.$toast('本金尚未提现！')
      } else if (item.tx_status == 3) {
        this.$toast('佣金已提现！')
      } else {
        this.vaultDialog = true
        this.yjmoney = item.task_yjmoney
        this.taskid = item.id
        this.taskclass = item.task_class
        console.log(this.taskclass);
      }
    },
  }
}
</script>
<style lang="stylus" scoped>
.taskmanage {
  height 100%

  .van-tabbar--fixed {
    position fixed
    top 0
  }

  .dialog {
    padding 20px 0 30px
    font-size 14px

    img {
      height 100px
    }

    p {
      text-align center
    }
  }

  .nodata {
    padding-top: 80px
    display flex
    flex-direction column
    justify-content center
    align-items center

    img {
      width 70%
    }

    .textcontent {
      font-size 14px
      color #a79478
    }

    .taskbtn {
      width 200px
      color #ffffff
      font-size 14px
      background #64c5ff
      text-align center
      line-height 36px
      margin-top 20px
    }
  }

  .activebox {
    position relative
    margin-top 50px
    margin-bottom 50px
    padding 10px
    background #f8f8f8

    .activeone {
      border-radius 5px
      margin-bottom 50px
      background #ffffff

      .titledate {
        font-size 14px
        padding 10px 0
        color #777
        display flex
        justify-content space-between
        align-items center
        border-bottom 1px solid #f8f8f8

        .first {
          margin-left 10px
          display flex
          align-items center
        }

        .typestyle {
          color #fff
          display inline-block
          line-height 24px
          padding 0 10px
          border-top-left-radius 12px
          border-bottom-left-radius 12px
        }
      }

      .picimg {
        display flex
        flex-direction column
        align-items center

        img {
          width 80px
          height 80px
          border-radius 5px
          margin 10px
        }

        span {
          text-align center
          display inline-block
          width 80px
          line-height 30px
          font-size 14px
          border-radius 20px
          background #a0c3fb
          color #3b7dfd
        }
      }
    }

    .activeone:last-child {
      margin-bottom 50px
    }

    .green {
      background #00d5c3
    }

    .red {
      background #f54d21
    }

    .blue {
      background #04a7f5
    }

    .purple {
      background rebeccapurple
    }

    .black {
      background black
    }

    .pink {
      background lightpink
    }

    .bottombox {
      padding 10px
      font-size 14px
      color #636363

      p {
        display flex
        justify-content space-between
        align-items center
        line-height 26px
      }

      div {
        line-height 26px
      }

      .btnmoney {
        background #f6aaa0
        color #ffffff
        padding 5px 10px
        border-radius 5px
      }

      .blue {
        background #bbb
      }
    }
  }
}
</style>


